<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script>			
			window.onresize=function(){				
				window.location.reload()				
			}			
			var widths=document.documentElement.clientWidth;			
			document.documentElement.style.fontSize=widths/25+"px"
		</script>
		<link rel="stylesheet" href="css/new_file.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<script src="js/jquery-3.1.1.js"></script>
		<link rel="stylesheet" type="text/css" href="../reset.css"/>
	</head>
	<body>
		<!---->
		<header>
			<div class="hea-le"><a href="../1/new_file.html"><img src="img/logo.png" alt="" /></a></div>
			<div class="hea-zho">设计师</div>
			<div class="hea-ri">
				<ul>
					<li><p class="p1"></p><span class="iconfont icon-nav"></span><p>导航</p></li>
					<li><p class="p1"></p><span class="iconfont icon-user"></span><p>我的</p></li>
				</ul>
			</div>
		</header>
		<!---->
		<div class="box">
			<ul>
				<li class="shaixuan"><p>筛选</p><span class="iconfont icon-down"></span></li>
				<li><p>风格</p><span class="iconfont icon-down"></span></li>
				<li><p>排序</p><span class="iconfont icon-down"></span></li>
				<li><p class="iconfont icon-search" style="font-size: 1.8rem;color: #36C892;"></p></li>
			</ul>
		</div>
		<!---->
		<div class="box1">
			<ul>
				<li>
					<div class="box1-1"><img src="img/2017-09-12_220019.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><a href="../a12/new_file.html"><p class="box-p1">陈冲</p><p class="box-p2">优秀</p><p class="box-p4">人气</p><p class="box-p3">738</p></a></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：现代 / 美式 / 简约 / 新古典</p>
							</li>
						</ul>
					</div>					
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004450.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">趣味</p><p class="box-p2">主任</p><p class="box-p4">人气</p><p class="box-p3">73</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：现代 / 简约 / 新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>				
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004505.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">儿童</p><p class="box-p2">主任</p><p class="box-p4">人气</p><p class="box-p3">245</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：美式 / 简约 / 新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004520.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">安慰人</p><p class="box-p2">优秀</p><p class="box-p4">人气</p><p class="box-p3">162</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：现代 / 美式</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004531.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">规范化</p><p class="box-p2">主任</p><p class="box-p4">人气</p><p class="box-p3">38</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004543.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">真幸福</p><p class="box-p2">主任</p><p class="box-p4">人气</p><p class="box-p3">57</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：简约 / 新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004553.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">方便</p><p class="box-p2">优秀</p><p class="box-p4">人气</p><p class="box-p3">1235</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：美式 / 简约 / 新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004603.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">阿卡</p><p class="box-p2">优秀</p><p class="box-p4">人气</p><p class="box-p3">46</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：简约 / 新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
				<li>
					<div class="box1-1"><img src="img/2017-09-13_004611.jpg" alt="" /></div>
					<div class="box1-2">
						<ul>
							<li><p class="box-p1">小明</p><p class="box-p2">优秀</p><p class="box-p4">人气</p><p class="box-p3">466</p></li>
							<li>
								<p class="pa">作品：</p>
								<p class="pa">8个</p>								
								<p class="pa">&nbsp;&nbsp;&nbsp;经验：</p>
								<p class="pa">5年</p>
								<p class="pa">&nbsp;&nbsp;&nbsp;评价：</p>
								<p class="pa">10</p>
							</li>
							<li>
								<p class="pa2">擅长风格：现代 / 新古典</p>
							</li>
						</ul>
					</div>
				</li>
				<hr color="#f4f4f4"/>
				<!---->
			</ul>
		</div>
		<!---->
		<div class="box2">
			<button class="but1">上一页</button>
			<button class="but2">1/30</button>
			<button class="but1">下一页</button>
		</div>
		<!---->
		<div id="slide"></div>
		<!---->
		<div class="box9 boxx">
			<div>
				<p>
					房先森互联网家装有别于传统公司与其他装修中介平台，以自营模式整合设计师与项目经理，杜绝项目转外包，利用
				互联网将工地进行在线全景直播，通过去中间环节，提供装修套餐+个性化定制服务。
				</p>
			</div>
		</div>
		<!---->
		<footer>
			<div><p class="iconfont icon-hot-line" style="font-size: 1.4rem;"></p><span> &nbsp;服务热线：400-9977-658</span></div>
			<ul>
				<li style="color:#39C893;">触屏版</li>
				<li>电脑版</li>
				<li>关于我们</li>
				<li>联系我们</li>
			</ul>
		</footer>
		<!---->
		<div class="mb">
			<img src="img/icon_close.png" alt="" class="img1"/>
			<img src="img/icon_logo.png" alt="" class="img2"/>
			<p class="p1">装修报价，只需10秒</p>
			<p class="p2">免费为您算得装修预算</p>
			<button>免费获取金币</button>
		</div>
		<!---->
		<div class="big">
			<div class="big-1">
				<ul class="ul1">
					<li>
						<p>级别</p>
					</li>
					<li class="li2">                    
						<div style="color: #82DABA;border: 0.05rem solid #82DABA;">不限</div>
						<div>总监</div>
						<div>主任</div>
					</li>
					<li>
						<div class="butt1">优秀</div>
					</li>
				</ul>
				<!---->
				<ul class="ul2">
					<li>
						<p>收费</p>
					</li>
					<li class="li2">
						<div style="color: #82DABA;border: 0.05rem solid #82DABA;">不限</div>
						<div>0-50元/m²</div>
						<div>50-100元/m²</div>
					</li>
					<li>
						<div class="butt1">100-150元/m²</div>
					</li>
				</ul>
			</div>
			<button class="aaa">确认</button>
		</div>
		<p class="iconfont icon-top pp" style="font-size: 1.5rem;color: #999;"></p>
	</body>
	<script>
		var img1=document.getElementsByClassName("img1")[0]
		var mb=document.getElementsByClassName("mb")[0]
		img1.onclick=function(){
			mb.style.display="none";
		}
		
		
		var shaixuan=document.getElementsByClassName("shaixuan")[0];
		var big=document.getElementsByClassName("big")[0];
		shaixuan.onclick=function(){
			big.style.display="block";
		}
		$(".aaa").click(function(ev){
			$(".big").css("display","none" )    
		})
		
		
		$(".pp").click(function(){
			$(document.body).stop().animate({"scrollTop":0});
		})
		
		$(".ul1>li>div").click(function(){
//			alert('asdsad')
		 	var i=$(this).index() 	
		 	$(".ul1>li>div").eq(i).css({"color":"#82DABA","border":"0.05rem solid #82DABA"}).siblings().css({"color":"#999","border":"none"})
		 })
		
		$(".ul2>li>div").click(function(){
//			alert('asdsad')
		 	var i=$(this).index() 	
		 	$(".ul2>li>div").eq(i).css({"color":"#82DABA","border":"0.05rem solid #82DABA"}).siblings().css({"color":"#999","border":"none"})
		 })
			 
	</script>
</html>
